<template>
  <div class="login-container full-screen flex">
    <el-card class="login-card">
      <div class="login-head primary text-center">
        <h2>人脸识别门禁系统</h2>
      </div>
      <el-form ref="loginForm" :model="user" :rules="rules" @submit.prevent>
        <el-form-item prop="username">
          <el-input
              v-model="user.username"
              placeholder="请输入手机号码"
              prefix-icon="iconfont iconemail"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              prefix-icon="iconfont iconpassword"
              v-model="user.password"
              type="password"
              placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="agree">
          <div class="flex space-between">
            <div>
              <el-checkbox v-model="user.agree"></el-checkbox>
              <a href="#" class="primary" style="margin-left: 8px"
              >我已阅读并同意用户协议和隐私条款
              </a>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              native-type="submit"
              :loading="loginLoading"
              @click="onSubmit"
          >登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="login-register text-center">
        <router-link to="/register" class="primary"
        >没有账号？立即注册<i class="el-icon-right"></i
        ></router-link>
      </div>
    </el-card>
  </div>
</template>

<script>
import {login} from '/src/network/account.js'

export default {
  name: 'login',
  data() {
    const agreeValid = (rule, value, callback) => {
      if (value === false) {
        callback(new Error('请认真阅读同意用户协议和隐私条款'))
      } else {
        callback()
      }
    }
    return {
      user: {
        username: '',
        password: '',
        agree: false,
      },
      loginLoading: false,
      rules: {
        username: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 6, max: 11, message: "手机号码格式错误", trigger: "blur"},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        agree: [{validator: agreeValid}],
      },
    }
  },
  methods: {
    onSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.login()
        }
      })
    },
    goToHomepage(){
      this.$message({
        type: 'success',
        message: '登录成功'
      })
      this.$router.push({
        name: 'Home'
      })
    },
    login() {
      const user = this.user
      this.loginLoading = true
      login(user.username, user.password)
          .then((res) => {
            if (res.code===200) {
              window.localStorage.setItem(
                  'authorization',
                  res.data
              )
              this.goToHomepage();
            }
            else {
              this.$message({
                type: 'error',
                message: res.data,
              })
              if (res.code===301){
                this.$router.push({name:'Auth'})
              }
            }
            this.loginLoading = false
          }, error => {
            this.$message({
              type: 'error',
              message: '出错了',
            })
            this.loginLoading = false
          })

    },
  },
  created() {
    if (window.localStorage.getItem('authorization')){
      this.goToHomepage();
    }
  }
}
</script>

<style scoped>
.login-container {
  background: url('/img/bg.jpg');
  background-size: cover;
  flex-direction: column;
  align-items: center;
}

.login-card {
  opacity: 0.9;
  margin: auto;
  width: 450px;
}

.login-head {
  height: 57px;
  margin: 20px auto;
  letter-spacing: 4px;
}

button {
  width: 100%;
  height: 40px;
  font-size: 18px;
  letter-spacing: 5px;
}

.login-register a {
  text-decoration: none;
}
</style>
